import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList,AtListItem,AtInput,AtMessage} from 'taro-ui'
import {  getGlobalData } from '../../../../global';
import './pinglunliebiao.scss'
import reactMixin from 'react-mixin';
import myJs from './pinglunliebiaoJs.js'
import app from '../../../../main.js'

export default class Pinglunliebiao extends Component {
    config = {
        navigationBarTitleText: '评论列表'
    }
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    init() {
        this.getComment();
        this.listComments();
    }

    onReachBottom() {
        // 分页逻辑,下拉到底部触发时间
        if (this.state.total > this.state.commentss.offset) {
            this.state.commentss.offset += this.state.commentss.length;
            this.listComments();
        }
    }

    submitComment() {
        var me = this;
        var data = {
            chat_id: me.state.chat_id,
            comment_id: me.state.comment_id,
            content: me.state.content,
            replied_id: me.state.replied_id
        };
        
        if (me.state.content != '' && me.state.content != 'undefined') {
                console.log(data);
            app.post("web/dynamic_topic/publishComment", data, function(res) {
                var status = res.data.status;
                    if (status == 200) {
                        me.listCommentss();
                    }
                me.setState({
                    content: ''
                })
            });
        } else {
            Taro.atMessage({
                'message': '请输入内容',
                'type': 'info'
            })
        }
    }
   
    handleClick(id,reply_id,reply_name){
        var content = this.state.content
        var replied_id = this.state.replied_id;
        var placeholder = this.state.placeholder;
        content = '';
        replied_id = reply_id;
        placeholder = '@'+reply_name;

        this.setState({
            content: content,
            replied_id: replied_id,
            placeholder: placeholder
        })
    }
    render () {
        return (
            <View className='pinglunliebiao'>
                <View className=' class_0'>
                    <AtList hasBorder={false}>
                        <AtListItem hasBorder={false} onClick={this.handleClick.bind(this,this.state.comment.id,'',this.state.comment.reply_name)} title={this.state.comment.reply_name} note={this.state.comment.reply_hospital} extraText={this.state.comment.created_at} thumb={app.getPath(this.state.comment.reply_head_image)}></AtListItem>
                    </AtList>
                    <View className=' class_1'>
                        <Text className=' class_2'>{this.state.comment.content}</Text>
                    </View>
                </View>
                <View className=' class_3'>
                    {
                        this.state.commentss.items.map((item,index)=>{
                            return (
                                <View className=' class_4' key={index}>
                                    <AtList hasBorder={false}>
                                        <AtListItem hasBorder={false} onClick={this.handleClick.bind(this,item.id,item.reply_id,item.reply_name)} title={item.reply_name} note={item.reply_hospital} extraText={item.created_at} thumb={app.getPath(item.reply_head_image)}></AtListItem>
                                    </AtList>
                                    <View className=' class_5'>
                                        {item.replied_name ===''
                                            ?<Text className=' class_6'>{item.content}</Text>
                                            :<Text className=' class_6'>
                                                <Text className=' class_9'>回复</Text>
                                                <Text className=' class_10'>{item.replied_name}</Text>
                                                <Text className=' class_11'>：{item.content}</Text>
                                            </Text>
                                        }
                                    </View>
                                    <View className='class_12'>
                                        <Text className='class_13' onClick={this.handleClick.bind(this,item.id,item.reply_id,item.reply_name)}>回复</Text>
                                    </View>
                                </View>

                            )
                        })
                    }
                    
                </View>
                <View className='class_14'></View>
                <View className='send'>
                    <AtInput
                        name='content'
                        type='text'
                        value={this.state.content}
                        onChange={this.handleChange.bind(this)}
                        className='input'
                        cursorSpacing={12}
                        placeholder={this.state.placeholder}
                        placeholderStyle='color:white'
                    />
                    <Image onClick={this.submitComment.bind(this)} src={app.imageUri+'img/send.png'} className='send-btn'></Image>
                </View>
                <View>
                    <AtMessage />
                </View>
            </View>
        );
    }
}
reactMixin.onClass(Pinglunliebiao,myJs);